/*
 * 网格导航模块
 * @Author: ljb
 * @Date: 2018-11-15 17:20:45
 * @Last Modified by: kanglin
 * @Last Modified time: 2019-03-05 11:32:43
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	@import '~src/assets/css/common.less';

	/*网格导航样式*/
	.grid-navs-area {
		padding-top: 16*@rem-per-px;
		margin-bottom: 10*@rem-per-px;
	}
	/*网格导航样式 END*/

</style>
<template>
	<!-- 网格导航栏 -->
	<section
		class="grid-navs-area v-com-nav-module white-bg">
		<gridNavs
			:navs="getNavs"
			@link="handleLink"/>
	</section>
</template>

<script>

import gridNavs from 'src/views/component/grid-navs';

/**
 * 网格导航模块
 * @vue-prop {Object} [setting={}] 后端返回的组件数据
 * @vue-computed {Array} getNavs 导航列表
 */
import qs from 'qs';

export default {
	name: 'NavModule',
	components: {
		gridNavs,
	},
	props: {
		setting: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {

		};
	},
	computed: {
		getNavs() {
			return this.setting ? this.setting.icons : [];
		},
	},
	methods: {
		// /**
		//  * 跳转链接
		//  * @param  {String} href {链接地址}
		//  * @return {undefined}
		//  */
		// linkTo(href) {
		// 	this.$emit('link', href);
		// },

		/**
		 * 处理点击, 管理后台生成的link, panx_app_icon_link 插件没有确定店铺域名.需要在前端替换
		 * @see dw-oc/catalog/view/javascript/libs/cascade/cascade.js:723
		 * @param {string} originLink
		 */
		handleLink(originLink) {
			// 转到更多方法
			const isMoreMethod = /^app:\/\/more/.test(originLink);
			if (isMoreMethod) { // 替换参数 url 中的 {#domain_name#} 为当前前端应用的路径
				const parameter = originLink.split('=').pop();
				const url = decodeURIComponent(parameter);
				const { search_type, module_id } = this.parseRoute(url);
				this.$emit('search', { search_type, module_id });
			} else { // 不是more 方法. 默认处理
				this.$emit('link', originLink);
			}
		},

		/**
		 * 解析url 等到vue的路由参数
		 * @return {object} routeParameter
		 */
		parseRoute(url) {
			const hash = url.replace('{#domain_name#}#/more?', '');
			return qs.parse(hash);
		},
	},
};
</script>
